<template>
	<view>
		<view class="live-head" v-if="detail">
			<view class="text-center">
				<image src="../../static/new/live-logo.png" class="live-logo"></image>
				<view class="live-title">{{detail.name}}</view>
			</view>
			<view class="live-content">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
						</view>
						<view class="content">
							<view class="text-black">{{detail.anchor_name}}</view>
							<view class="text-gray text-sm flex"></view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">{{detail.start}} — {{detail.end}}</view>
						</view>
					</view>
				</view>
				<view class="text-center">
					<view class="text-center padding-top-sm padding-bottom-sm">
						<text class="live-content-title">{{detail.name}}</text>
					</view>
					<view class="padding-top-sm">
						<countdown :start="start" :finish="finish" @finish="onFinish"></countdown>
					</view>
					<!-- <view class="live-timer">
						直播课倒计时
					</view>
					<view>
						<button class="cu-btn round sign-btn">立即预约</button>
					</view> -->
				</view>
			</view>
		</view>
		
		
		<view class="cu-timeline padding-top-sm padding-bottom-lg" v-for="live in liveList">
			<view class="cu-time">
				<view>
					<image src="../../static/new/kchf.png" class="list-img"></image>
					<text class="list-title padding-left-xs">{{live.name}}</text>
					<text class="list-des-right" v-if="live.type==1">免费课程</text>
				</view>
				<image src="../../static/new/kchf-bor.png" class="kchf-bor-gj"></image>
			</view>
			<view class="cu-item " v-for="value in live.value" @tap="toInfo(value.id)">
				<image v-if="live.type==1" src="../../static/new/kchf-list.png" class="free"></image>
				<image v-if="live.type==2" src="../../static/new/cj.png" class="free"></image>
				<image v-else-if="live.type==3" src="../../static/new/gj.png" class="free"></image>
				
				<view class="content bg-white radius box">
					<view  v-if="live.type!=1" class="box-con text-center" :class="live.type==2?'cj':'gj'"  >
						<image src="../../static/new/lock.png" class="box-img"></image>
					</view>
					<view class="padding-sm">
						<text class="text-gray text-lg live-list-content-title">{{value.start}} — {{value.end}}</text>
					</view>
					<view class="padding-sm text-lg text-black text-bold">
						{{value.name}}
						<text style="float: right;">
							<text class="cuIcon-right"></text>
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
			
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	import countdown from 'components/tanchu/tanchu.vue'
	export default {
		components: {
			countdown
		},
		data() {
			return {
				start: 0,
				finish: 0,
				liveList: [],
				detail:{}
			}
		},
		onLoad() {
			this.getLiveList();
		},
		methods: {
			onFinish() {
				uni.showToast({
					icon: 'none',
					title: '倒计时结束'
				})
			},
			toInfo(id){
				let that = this;
				that.$http('common.liveValidateRule').then(res => {
					if (res.code === 1) {
						console.log(res);return;
						wx.navigateTo({
							url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${res.data.room_id}`
						});
					}else{
						
					}
				});
				return;
				
				// uni.navigateTo({
				// 	url:"/pages/live/live-info"
				// })
			},
			getLiveList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('common.liveList').then(res => {
					if (res.code === 1) {
						that.liveList = res.data.list;
						that.detail = res.data.detail;
						if(that.detail){
							that.start = res.data.detail.starttime;
							that.finish = res.data.detail.endtime;
						}
					
						
					}
				});
			}
		}
	}
</script>

<style scoped>
	.live-head {
		background-image: url(@/static/new/live-bg.png);
		background-size: 100% 100%;
		height: 900rpx;
	}

	.live-logo {
		height: 102rpx;
		width: 102rpx;
		margin-top: 70rpx;
	}

	.live-title {
		color: #ffffff;
		font-size: 52rpx;
		font-weight: 600;
		padding-top: 10rpx;
	}

	.live-content {
		padding-top: 120rpx;
		margin: 0 50rpx;
	}

	.cu-list.menu-avatar>.cu-item {
		background-color: transparent;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 150px;
		text-align: right;
	}

	.live-content-title {
		color: black;
		font-size: 30rpx;
		font-weight: 550;
		border-bottom: 2rpx solid #DAD9DB;
		padding-bottom: 20rpx;
	}

	.cu-list.menu-avatar>.cu-item {
		height: 100rpx;
	}

	.live-timer {
		padding: 30rpx 0;
		color: #A1A2A2;
		font-size: 28rpx;
	}

	.sign-btn {
		background-image: url(@/static/new/ljyy.png);
		background-size: 100% 100%;
		height: 75rpx;
		width: 560rpx;
		color: #ffffff;
		font-size: 36rpx;
	}

	.cu-timeline {
		background-color: transparent;
	}

	.list-img {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.list-title {
		font-size: 34rpx;
		color: black;
		vertical-align: middle;
		padding-left: 10rpx;
	}

	.cu-timeline .cu-time {
		width: 100%;
		text-align: left;
		padding: 10px 40rpx;
		display: block;
	}

	.list-des-right {
		float: right;

	}

	.kchf-bor {
		position: absolute;
		height: 14rpx;
		width: 149rpx;
		margin-top: -20rpx;
		margin-left: 60rpx;
		z-index: -1;
	}

	.kchf-bor-gj {
		position: absolute;
		height: 14rpx;
		width: 220rpx;
		margin-top: -20rpx;
		margin-left: 60rpx;
		z-index: -1;
	}

	.cu-timeline>.cu-item {
		padding: 15px 15px 0px 46px;
	}

	.cu-timeline>.cu-item::before {
		background-color: transparent;
		font-family: '';
		/* background-image: url(@/static/new/kchf-list.png);
		background-size: 100% 100%;
		height: 44rpx;
		width: 44rpx; */
	}

	.free {
		position: absolute;
		height: 44rpx;
		width: 44rpx;
		left: 38rpx;
		top: 50rpx;
	}

	.live-list-content-title {
		border-bottom: 2rpx solid #DFE0E0;
		padding-bottom: 30rpx;
	}

	.box {
		/* width:180px;
	    height:100px; */
		position: relative;
		/* background: pink; */
		overflow: hidden;
	}
	.box .box-con {
		width: 100px;
		height: 100px;
		position: absolute;
		top: -60px;
		right: -60px;
		transform: rotate(45deg);
	}
	.cj{
		background: #FF9E28;
	}
	.gj{
		background: #FE6265;
	}
	.box-img{
		transform: rotate(-45deg);
		    width: 42rpx;
		    height: 42rpx;
		    position: absolute;
		    left: 80rpx;
		    bottom: 10rpx;
	}
</style>
